<template>
    <div>
        <el-table size="large" :data="formData.apply_list">
            <el-table-column label="模型名称" prop="name" width="250" />
            <el-table-column label="免费次数/天" prop="daily_limit" min-width="150">
                <template #header>
                    <div class="flex items-center">
                        <span class="mr-[2px]">免费次数/天</span>
                        <el-tooltip
                            effect="dark"
                            content="填写0标识免费不限次数,如果没有免费次数则关闭启用状态即可"
                            placement="top-start"
                        >
                            <icon name="el-icon-InfoFilled" class="cursor-pointer" />
                        </el-tooltip>
                    </div>
                </template>
                <template #default="{ row }">
                    <el-tag v-if="row.is_disable" type="info">无免费次数</el-tag>
                    <div v-else class="w-[80%]">
                        <el-input
                            v-model="row.daily_limit"
                            placeholder="0表示不限制"
                            clearable
                            type="number"
                            :min="0"
                            :max="99999999"
                        >
                            <template #append>
                                <span>{{ row?.daily_limit <= 0 ? '不限制' : '次' }}</span>
                            </template>
                        </el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="是否启用" prop="is_disable" width="110">
                <template #header>
                    <div class="flex items-center">
                        <span class="mr-[2px]">是否启用</span>
                        <el-tooltip
                            effect="dark"
                            content="当状态为关闭时: 免费次数无论填写多少都不生效"
                            placement="top-start"
                        >
                            <icon name="el-icon-InfoFilled" class="cursor-pointer" />
                        </el-tooltip>
                    </div>
                </template>
                <template #default="{ row }">
                    <el-switch
                        v-model="row.is_disable"
                        :active-value="0"
                        :inactive-value="1"
                    />
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'

const props = defineProps<{
    modelValue: Record<string, any>
}>()

const emits = defineEmits<{
    (event: 'update:modelValue', value: Record<string, any>): void
}>()

const formData = useVModel(props, 'modelValue', emits)
</script>
